<template>
	<div class="strut-div">
		<div class="card-item" style="height:317px;" v-for="(chart,index) in links" :key="index"  :class="{'card-item-dual':index == 2}">
			<p class="card-title">{{properties[chart].name}}</p>
			<div class="card-div">
				<common-dualarea-chart :ref="chart" :config="defaultChart(chart)" />
			</div>
		</div>
		<div class="card-item card-item-dual" style="height:317px;">
			<p class="card-title">2019年育苗数量统计</p>
			<div class="card-div">
				<common-mix-chart ref="numOfTree" :config="numOfTreeConfig" />
			</div>
		</div>
	</div>
</template>

<script>
	import CommonPieNewChart from '@/components/common/common-pieNew-chart.vue';
	import CommonDualareaChart from "@/components/common/common-dualarea-chart.vue";
	import CommonMixChart from "@/components/common/common-mix-chart.vue";
	import {
		numOfTree,
	} from '@/network/tg-fake-data.js';
	export default {
		name: 'sxRight',
		components: {
			CommonPieNewChart,
			CommonDualareaChart,
			CommonMixChart,
		},
		props: {
			data: {
				type: Object,
				default: () => ({}),
			},
			properties: {
				type: Object,
				default: () => ({}),
			},
			links: {
				type: Array,
				default: () => [],
			}
		},
		data() {
			return {
				numOfTreeConfig: {
					request: {
						url: "url",
						params: {},
					},
					option: {
						legend: {
							data: ['1', '2'],
							right: 0
						},
						id: 'numOfTree',
						xAxis: numOfTree.xAxis,
						yAxis: [{
								type: 'value',
								name: '',
								min: 0,
								max: null,
								// interval: 10,
								axisLabel: {
                  formatter: '{value}万',
                  textStyle: {
                    fontSize: 10,
                    color: '#fff'
                  },
								},
								splitLine: {
									show: false
								}, //去除网格线
							},
							{
								show: false,
							}
						],
						series: [{
								name: '产量',
								type: 'bar',
								data: numOfTree.yAxis,
								color: {
									type: 'linear',
									x: 0,
									y: 0,
									colorStops: [{
										offset: 0,
										color: '#3398DB' // 0% 处的颜色
									}, {
										offset: 1,
                    color: '#3398DB' // 100% 处的颜色
									}],
								},
								barWidth: 18, //柱图宽度
							},
						]
					}
				},
			}
		},
		mounted() {
			this.$refs.numOfTree.initChart();
		},
		watch: {
			links(value) {
				if (value && value.length) {
					this.$nextTick(() => {
						this.links.map(key => this.$refs[key]).filter(ref => !!ref)
								.forEach(ref => ref[0].initChart());
					});
				}
			},
		},
		methods: {
			defaultChart(id) {
				const {
					[id]: {
						colors: [startColor, endColor],
						formatter
					}
				} = this.properties;
				const data = this.data[id] || [];
				return {
					request: {
						url: "url",
						params: {},
					},
					option: {
						id,
						x: this.data.time || [],
						y: [{
							axis: {
								min: null,
								max: null,
								offset: -10,
								fontSize: 10,
								label: formatter,
							},
							smooth: true,
							title: '',
							data,
							startColor,
							endColor,
						}]
					}
				};
			}
		}
	}
</script>

<style lang="scss" scoped>
	.card-item {
		margin-bottom: 20px;
	}
  .card-item:nth-of-type(3){
    margin-right: 20px;
  }
  .card-item-dual {
    width: 420px;
  }
</style>
